<template>
    <div>
        名称<input type="text" v-model="model.shopName" >
        <input type="button" value="查询" @click="cha">
        <table>
            <tr>
                <td>Id</td>
                <td>门店名称</td>
                <td>门店电话</td>
                <td>地址</td>
                <td>图片</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.shopName }}</td>
                <td>{{ item.phone }}</td>
                <td>{{ item.adderss }}</td>
                <td><img :src="item.photo" width="100" height="100"></td>
                <td>{{ item.state }}</td>
                <td>操作</td>
            </tr>
        </table>
        <span>总条数{{ data.count }}</span>
        <span>总页数{{ data.page }}</span>
        <span>当前{{ model.Index + '/' + data.page }}页</span>
        <div>
            <input type="button" value="首页" @click="gopage('a')">
            <input type="button" value="上一页" @click="gopage('b')">
            <input type="button" value="下一页" @click="gopage('c')">
            <input type="button" value="尾页" @click="gopage('d')">
            <input type="number" v-model="page">
            <input type="button" value="跳转" @click="gopage(page)">
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

onMounted(() => {
    cha();
})
const gopage = (str: any) => {
    switch (str) {
        case 'a':
            if (model.Index == 1) {
                return;
            }
            model.Index = 1;
            break;
        case 'b':
            if (model.Index == 1) {
                return;
            }
            model.Index--;
            break;
        case 'c':
            if (model.Index == data.page) {
                return;
            }
            model.Index++;
            break;
        case 'd':
            if (model.Index == data.page) {
                return;
            }
            model.Index = data.page;
            break;

    }
    cha();
}


let model = reactive({
    shopName: '',
    Index: 1,
    size: 2
})

let data = reactive({
    list: [],
    count: 0,
    page: 0,
})

let page = ref(1);

const cha = () => {
    axios({
        url: 'https://localhost:7244/api/Shop/ShopShow',
        method: 'get',
        params: model
    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;
        })
        .catch((ree) => {
            console.log(ree);
        })
}
</script>

<style scoped></style>